<template>
  <view class="my-conatiner">
    <view class="user-info-container">
      <view class="info-item">
        <image class="user" :src="'/static/user.png'"></image>
        <view class="member-info">
          <view>
            {{ user.profile?.nickname }}
          </view>
          <view style="text-decoration: underline"> @{{ user.profile?.userName }} </view>
        </view>
      </view>
      <view class="setting-item" @click="goSetting">
        <image class="setting" src="/static/my/setting.png"></image>
      </view>
    </view>
    <view class="main-content common-card">
      <view class="content-item" v-for="(item, index) in contentList" :key="index" @click="pushPage(item)">
        <view class="image-container">
          <image :src="item.image" mode=""></image>
        </view>
        <view class="text-container">
          <view>
            <view>
              {{ item.text }}
            </view>
            <view class="tip-text">
              {{ item.tip }}
            </view>
          </view>
          <view class="icon-container">
            <uni-icons type="right" size="20" color="#333"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/store/user";
const user = useUserStore();
const contentList = [
  {
    image: "/static/my/feedback.png",
    text: "意见反馈",
    tip: "进行意见反馈，提交问题",
    routeUrl: "/subPackages/my/feedback/index",
  },
  {
    image: "/static/my/help.png",
    text: "帮助中心",
    tip: "查看操作文档网页",
    routeUrl: "/subPackages/my/helpCenter/index",
  },
  {
    image: "/static/my/menu.png",
    text: "关于我们",
    tip: "查看当前小程序版本，用户协议和隐私政策",
    routeUrl: "/subPackages/my/aboutUs/index",
  },
];
const goSetting = () => {
  uni.navigateTo({
    url: "/subPackages/my/setting/index",
  });
};
const pushPage = (item) => {
  if (!item.routeUrl) return;
  uni.navigateTo({
    url: item.routeUrl,
  });
};
</script>

<style scoped lang="scss">
.my-conatiner {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #1ab394, #f3f3f4, #fff);
  padding: 10px;
  box-sizing: border-box;

  .user-info-container {
    width: 100%;
    padding-left: 15px;
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    view {
      height: 100%;
    }

    .info-item {
      color: #fff;
      display: flex;

      .member-info {
        margin-left: 15rpx;
        font-size: 26rpx;

        view {
          height: 50%;
          line-height: 22px;
        }
      }

      image {
        height: 100%;
        width: 45px;
      }
    }

    .setting-item {
      box-sizing: border-box;
      padding: 5px;

      image {
        height: 16px;
        width: 16px;
        display: block;
      }
    }
  }
}

.main-content {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;

  .content-item {
    display: flex;
    padding-top: 20rpx;
    font-size: 24rpx;
    color: $uni-color-1;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      .text-container {
        border-bottom: none;
      }
    }

    .image-container {
      height: 60rpx;
      width: 60rpx;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .text-container {
      width: calc(100% - 80rpx);
      border-bottom: 1px solid #ddd;
      padding-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tip-text {
      font-size: 20rpx;
      color: $uni-color-3;
      margin-top: 5rpx;
    }
  }
}
</style>
